<template>
    <div>
<h2>显示</h2>
姓名<input type="text" v-model="start.name">
<input type="button" @click="getStart" value="查询">

<table class="table table-bordered">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
   <tr v-for="item in list">
    <td>{{ item.name }}</td>
    <td>{{ item.des }}</td>
    <td>{{ item.age }}</td>
   </tr>
</table>
<input type="button" @click="page('a')" value="首页">
<input type="button" @click="page('b')" value="上一页">
<input type="button" @click="page('c')" value="下一页">
<input type="button" @click="page('d')" value="尾页">
    </div>
</template>

<script setup lang="ts">


import {reactive,toRefs,onMounted} from "vue";
import {useRouter,useRoute} from "vue-router";

const router = useRouter();
const route = useRoute();

import axios from "axios";
 
 const data:any=reactive({
    start:{
      name:'',
      size:2,
      index:1,


    },
    list:[],
    count:0,
    sum:0
 })
let {start,list,count,sum}=toRefs(data)

const getStart=()=>{
    let obj={
      name:start.value.name,
      size:start.value.size,
      index:start.value.index
    }
  axios({
    url:'https://localhost:7140/api/Values/show',
    method:'get',
    params:obj
  }).then((res)=>{

    list.value=res.data.data
    count.value=res.data.count
    sum.value=res.data.sum
  })

  
}

onMounted(()=>{
  getStart()
})
const page=(e)=>{
    switch (e) {
        case 'a':
            if (start.value.index==1){
              alert("已经是第一页");
              return;
            }
            start.value.index=1
            
            break;
            case 'b':
            if (start.value.index==1){
            
              return;
            }
            start.value.index--
            
            break;
            case 'c':
            if (start.value.index==count.value){
           
              return;
            }
            start.value.index++
            
            break;
            case 'd':
            if (start.value.index==count.value){
              alert("已经是最后一页");
              return;
            }
            start.value.index=count.value
            
            break;
    
   
    }
    getStart();
}
</script>

<style scoped>

</style>